<template>
  <page-loading :show="pageLoading">
    <view class="wrap">
      <view class="info box">
        <view class="info-item flex flex-ai-c">
          <text class="info-item-left color-999">VIN码:</text>
          <text class="color-333">{{ vin }}</text>
        </view>
        <view class="info-item flex flex-ai-c">
          <text class="info-item-left color-999">公里数:</text>
          <text class="color-333">{{ num }}</text>
        </view>
        <view class="meter info-item flex flex-ai-c">
          <text class="color-333">仪表盘照片</text>
          <text class="color-999">需包含公里数和油量</text>
        </view>
        <view class="info-img flex flex-ai-c flex-jc-c" @click="choosePic">
          <image :src="imgUrl" class="img" mode="choosePic" v-show="imgUrl" />
          <u-icon
            v-show="!imgUrl"
            name="plus"
            color="#999"
            size="100rpx"
          ></u-icon>
        </view>
      </view>
      <view class="lights box">
        <view class="title">故障灯</view>
        <view class="lights-list">
          <view
            class="list-item flex flex-ai-c"
            :class="{ active: selected[index].detection_State === 2 }"
            @click="chooseItem(index)"
            v-for="(item, index) in options"
            :key="index"
          >
            <i-icon
              :icon="options[index].icon"
              type="single"
              size="30rpx"
              :color="
                selected[index].detection_State === 2 ? '#EB5C02' : '#333'
              "
            ></i-icon>
            <view style="padding-left: 8rpx"> {{ item.name }}</view>
          </view>
        </view>
      </view>
      <view class="btn">
        <button class="btn-primary" @click="next">保存并进入下一步</button>
      </view>
    </view></page-loading
  >
</template>
<script>
export default {
  data() {
    return {
      current: -1,
      options: [],
      selected: [], // //已选项目
      id: '', //总类目id
      name: '', //总类目名称
      orderId: '', //到店单id
      technicianName: '', //技师名字
      imgUrl: '', //仪表图片
      num: 0, //公里数
      back: 0, //是否显示关闭按钮 0 不显示 1 返回到店单详情的步数
      backPress: true, //是否出页面返回上一页事件
      pageLoading: false, //初始化加载效果
    }
  },

  computed: {
    vin() {
      return this.$store.state.afterSales.carInfo.vin
    },
  },

  onLoad(e) {
    this.backPress = true
    this.orderId = e.id
    this.technicianName = e.name ? e.name : ''
    this.num = this.$store.state.afterSales.carInfo.km
    this.visualCheckData()
    this.back = e.back ? Number(e.back) : 0
  },

  onBackPress() {
    if (this.backPress) {
      if (this.back === 1) {
        uni.redirectTo({
          url:
            '/pages_afterSales/visualCheck/visualCheckInside?back=1&id=' +
            this.orderId,
        })
        return true
      }
    }
    return false
  },

  onNavigationBarButtonTap() {
    this.backPress = false
    uni.navigateBack({
      delta: 1,
    })
  },
  methods: {
    //获取选项
    getOptions() {
      this.$api.jsonData
        .getVisualMeter()
        .then((res) => {
          this.options = res.data[0].list
          this.id = res.data[0].id
          this.name = res.data[0].name
          if (!this.selected.length) {
            for (let i = 0; i < res.data[0].list.length; i++) {
              this.selected.push({
                car_Detection_Typedata_Id: res.data[0].list[i].id, //检测项id
                car_Detection_Typedata_Name: res.data[0].list[i].name, //检测项名称
                url: '', //异常图片地址,
                car_Detection_Typedata_Type_Id: this.id, //上级id
                car_Detection_Typedata_Type_Name: this.name, //上级名称
                detection_State: 1, //状态（0未检测，1正常，2异常）
              })
            }
          }
          console.log(this.options)
          this.pageLoading = true
        })
        .catch((err) => {
          console.log(err)
          this.pageLoading = true
        })
    },

    //数据回显
    visualCheckData() {
      this.$api.afterSales
        .visualCheckData({
          order_arrive_store_id: this.orderId,
          detection_Type: 2, //检测类型(0预检外观,1预检内饰,2预检仪表盘,3预检其它检查)
        })
        .then((res) => {
          if (res.data.length) {
            this.selected = [...res.data]
            this.imgUrl = res.data[0].url
            console.log(this.selected)
          }
          this.getOptions()
        })
        .catch((e) => {
          console.log(e)
          this.getOptions()
        })
    },
    //选择
    chooseItem(i) {
      if (this.selected[i].detection_State === 2) {
        this.$set(this.selected[i], 'detection_State', 1)
      } else {
        this.$set(this.selected[i], 'detection_State', 2)
      }
    },

    //下一步
    next() {
      if (!this.imgUrl) {
        uni.showToast({
          title: '请添加仪表盘照片',
          icon: 'none',
        })
        return
      }

      this.$api.afterSales
        .addVisualCheck({
          order_arrive_store_id: this.orderId,
          technician_name: this.technicianName,
          detection_Type: 2, //检测类型(0预检外观,1预检内饰,2预检仪表盘,3预检其它检查)
          list: this.selected,
        })
        .then((res) => {
          uni.showToast({
            title: '提交成功',
            duration: 2000,
          })
          setTimeout(() => {
            uni.redirectTo({
              url:
                '/pages_afterSales/visualCheck/visualCheckOthers?back=1&id=' +
                this.orderId,
            })
          }, 2000)
        })
        .catch((e) => {
          console.log(e)
        })
    },

    //上传图片
    choosePic() {
      const _this = this
      uni.showActionSheet({
        itemList: ['拍照', '打开相册'],
        success(res) {
          const cameraType = res.tapIndex ? 'album' : 'camera'
          uni.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: [cameraType], // 从相册选择
            success: function (result) {
              uni.showLoading({
                title: '图片上传中~',
              })
              _this.$api.files
                .uploadImg({
                  filePath: result.tempFilePaths[0],
                })
                .then((res) => {
                  _this.imgUrl = res.baseUrl + res.url
                  uni.hideLoading()
                  for (let i = 0; i < _this.selected.length; i++) {
                    _this.selected[i].url = _this.imgUrl
                  }
                })
                .catch((err) => {
                  uni.hideLoading()
                  uni.showToast({
                    title: '图片上传失败，请稍后重试',
                    icon: 'none',
                  })
                })
            },
          })
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
page {
  background: #f6f6f6;
}
.wrap {
  padding: 20rpx 24rpx 0;

  .box {
    padding: 0 20rpx;
    background: #fff;
    border-radius: 10rpx;
  }

  .info {
    padding-bottom: 30rpx;

    .info-item {
      height: 88rpx;
      border-bottom: 2rpx solid #eee;
      font-size: 28rpx;
      font-weight: 500;

      .info-item-left {
        width: 150rpx;
      }
    }

    .meter {
      border-bottom: none;

      .color-999 {
        padding-left: 30rpx;
      }
    }

    .info-img {
      height: 270rpx;
      width: 100%;
      background: #f6f6f6;
      border-radius: 10rpx;

      .img {
        height: 270rpx;
        width: 100%;
      }
    }
  }

  .lights {
    margin-top: 20rpx;

    .title {
      height: 76rpx;
      line-height: 76rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
    }

    .lights-list {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 14rpx;

      .list-item {
        min-width: 122rpx;
        padding: 0 20rpx;
        height: 66rpx;
        line-height: 66rpx;
        border-radius: 10rpx;
        border: 3rpx solid transparent;
        background: #f6f6f6;
        margin: 10rpx 12rpx 10rpx 0;
        text-align: center;
      }

      .active {
        border-color: #eb5c02;
        background: #fff5f5;
        color: #eb5c02;
      }
    }
  }

  .btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16rpx 24rpx;
    background: #fff;

    .btn-primary {
      width: 100%;
    }
  }
}

/deep/ uni-button:after {
  border: none;
}
/deep/ uni-radio .uni-radio-input.uni-radio-input-checked:before {
  color: #000;
}
</style>
